<!-- 小组排名 -->
<template>
    <div class="rank-container" ref="rankChart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'Rank',
    data() {
        return {
            chart: null,
            option: {
                title: {
                    textStyle: {
                        fontSize: 10,
                        fontWeight: 100,
                        color: '#ffffff'
                    }
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#00EEF1',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    borderColor: '#00EEF1',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: params => `<div style="border-bottom: 1px solid #00EEF1; padding-bottom: 5px; margin-bottom: 5px;">
                        ${params[0].name}<br/>
                        得分：${params[0].value}
                    </div>`
                },
                grid: {
                    top: '10',
                    left: '10',
                    bottom: '10',
                    containLabel: true
                },
                xAxis: [{ show: false }],
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        color: "rgba(255,255,255,1)",
                        fontSize: 10
                    },
                    axisTick: { show: false },
                    axisLine: { show: false },
                    zlevel: 99
                },
                series: [{
                    type: 'bar',
                    barWidth: '30%',
                    barCategoryGap: '20',
                    itemStyle: {
                        borderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#048BFE' },
                            { offset: 1, color: '#00EEF1' }
                        ])
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff',
                        fontSize: '10'
                    },
                    data: []
                }]
            },
            rank: {
                name: [],
                score: []
            }
        }
    },
    computed: {
        requestData() {
            return {
                missionType: this.$store.state.mission,
                studentClassId: this.$store.state.current
            }
        }
    },
    watch: {
        requestData: {
            handler: 'fetchRankingData',
            deep: true
        }
    },
    mounted() {
        this.fetchRankingData()
    },
    methods: {
        async fetchRankingData() {
            try {
                const response = await this.$axios.post("/group/ranking", this.requestData)
                const { name, score } = response.data.data
                this.rank.name = name
                this.rank.score = score
                this.initChart()
            } catch (error) {
                console.error('请求失败', error)
            }
        },
        initChart() {
            if (!this.chart) {
                this.chart = this.$echarts.init(this.$refs.rankChart)
            }

            this.option.yAxis.data = [...this.rank.name].reverse()
            this.option.series[0].data = [...this.rank.score].reverse()
            this.chart.setOption(this.option)
        }
    },
    beforeDestroy() {
        this.chart?.dispose()
    }
}
</script>

<style scoped>
.rank-container {
    width: 100%;
    height: 90%;
}
</style>